<template>
  <div>
    <div class="head-content">
      <div class="logo-content" @click="goBack">
        <div class="logo">
          <img src="@/assets/texture/home/lg-1_3.gif"/>
        </div>
      </div>
      <div class="select-content">
        <span v-for="(v,k) in select_titles" :key="k">
          <router-link :class="v.isSelect?'is-select':''" @click.native="select_click(v)" :to="v.url">{{v.name}}</router-link>
        </span>
      </div>
    </div>
    <!--<transition :name="transitionName">-->
      <!--<router-view></router-view>-->
    <!--</transition>-->
    <router-view></router-view>
    <div>
      <button @click="operate">点击调用弹框</button>
    </div>
    <span v-for="(v,k) in temp_arr" :key="k">{{k}}---{{v}}  </span>

    <span>>>>>state.count:{{add_one}}</span>
    <!--<button @click="increment">+++</button>-->
    <!--<button @click="decrement">-&#45;&#45;</button>-->
  </div>
</template>

<script>
    export default {
        name: "Home",
        data(){
          return{
            select_titles:Tools.global_info.select_titles,
            select_item:null,
            transitionName:'slide-right',
            temp_arr:[1,2,1,2,1,12]
          }
        },
        components:{
        },
        //接收父组件传递过来的参数
        props:[],
        computed:{
          ...Tools.mapState({
            count:'count',
            add_one(state){
              return state.count + 10.2;
            },
          }),
          ...Tools.mapGetters('a',[
            'to_count',
            'get_count',
            'getTodoById'
          ])
        },
        methods:{//监听方法
          init:function(){
            // console.log('......init.........')
          },
          select_click:function(event){
            if(this.select_item){
              this.select_item.isSelect=false;
              this.select_item=event;
            }
            else{
              for(var i=0;i<this.select_titles.length;i++){
                if(this.select_titles[i].isSelect){
                  this.select_item=this.select_titles[i];
                  break;
                }
              }
            }
            this.select_item.isSelect=true;
          },
          goBack:function(){
            // window.history.length>1
            // ?this.$router.go(-1)
            // :this.$router.push('/');
            // this.$router.push({ name: '404', params: { userId: 123 }})
            // console.log(this.$router)
          },
          operate(){
            // window.confirm('Do you really want to leave? you have unsaved changes!')
            // Tools.alert({
            //   title:'信息',
            //   content:'登入成功！这里执行点击右上角需要做的事，默认<a>执行关闭弹框</a>',
            //   cancelBtn: false, //这个是启用取消按钮，
            //   close(){
            //     // 这里执行点击右上角需要做的事，默认执行关闭弹框
            //   },
            //   confirm(){
            //     // 这里执行点击确定按钮需要做的事，默认执行关闭弹框
            //   },
            //   cancel(){
            //     // 这里执行点击取消按钮需要做的事，默认执行关闭弹框
            //   }
            // });
            // Tools.myaxios.get('http://localhost:8080/game')
            // console.log(Tools.myaxios);

            // this.$root.$set(this.temp_arr,2,145)
            // // this.temp_arr[2]=145;
            // this.temp_arr.push(79788)
            // console.log(this.temp_arr)
            // // this.select_titles[0]=null;
            // // console.log(this.select_titles)
            // this.$root.$set(this.select_titles[2],'name','lalalla')
            // console.log(this.select_titles)
            this.add_count(11.99);
          },
          ...Tools.mapMutations('a',[
            'add_count',
            'remove_count'
          ])
        },
        mounted(){//页面初始化方法
          // console.log(this.$data)
          // this.select_click(null);
          // console.log(this.$router)
          // console.log(this.$route)
          console.warn('home--------------')
          Tools.Utils.Router_Each();
          console.log(this.getTodoById(1))
        },
        watch:{//监听值变化
          '$route' (to, from) {
            // 对路由变化作出响应...
            console.log('对路由变化作出响应',to)
            const toDepth = to.path.split('/').length
            const fromDepth = from.path.split('/').length
            this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
            console.log(this.transitionName)
          }
        }
    }
</script>

<style scoped lang="scss">
  .head-content{
    width:auto;
    min-width: 1000px;
    background: #000;
    .logo-content{
      .logo{
        width: 1000px;
        margin: auto;
      }
    }
    .select-content{
      width:fit-content;
      min-width: 1000px;
      color: white;
      text-align: center;
      background: #232e3e;
      margin: auto;
      border-radius: 20px;
      opacity: 0.7;
      span{
        font-size: 18px;
        line-height: 32px;
        margin: 0 20px;
      }
      a:hover{
        color: #cecdcd;
      }
      .is-select{
        color: #aeb98d;
      }
    }
    .select-content:hover{
      opacity: 1;
    }
  }
</style>
